<template>
	<div>
		<el-dialog draggable v-model="dialogVisible" title="图片库" width="800" >
			<div class="uw-flex uw-border-white-smoke-top uw-pt-20">
				<ul class="uw-image-manager-left uw-border-white-smoke-right uw-pr-10">
					<li 
						v-for="(item,index) in categoryList" 
						:key="index" 
						:class="categoryId == item.id ? 'active' : ''"
						class="uw-flex-between uw-p10 uw-radius-4 uw-mb-4"
						@click="selectCategory(item)"
					>
						<el-icon :size="20"><Folder  /></el-icon>
						<div class="uw-flex-1 uw-pl-5">{{item.name}}</div>
						<el-icon v-if="index == 0" @click="showAddCategory=true" :size="20"><FolderAdd /></el-icon>
						<el-icon v-else :size="20" @click.stop="deleteCategory(item)" ><Delete /></el-icon>
					</li>
				</ul>
				<div class="uw-image-manager-box uw-flex-column uw-pl-10">
					<div class="top uw-p0-10 uw-mb-10">
						<el-upload
						    class="upload-demo"
						    :multiple="false"
							:show-file-list="false"
							name="image"
							:data="upDate"
							:action="`${baseURL}/upload/file`"
							:on-success="handSuccess"
						>
						    <el-button type="primary">上传图片</el-button>
						</el-upload>
					</div>
					<div class="uw-flex-wrap">
						<div class="uw-image-item uw-p10" v-for="(item,index) in imageList" :key="index" style="width: calc(100% / 5)" @click="selectImamge(item)">
							<div class="uw-image-item-image" style="width:100px;height: 100px;">
								<el-image :src="item.url" style="width:100%;height: 100%;">
									<template #error>
										<div class="image-slot">
											<el-icon color="#999" :size="40">
												<Picture />
											</el-icon>
										</div>
									</template>
								</el-image>
								<div v-if="item.selected" class="uw-image-item-image-select uw-flex-center">
									<el-icon><Select :size="30" color="#FFF" /></el-icon>
								</div>
							</div>
							<div class="uw-ellipsis-1">{{item.fileName}}</div>
						</div>
					</div>
					<div class="uiwu-pagination ">
						<uw-pagination :limit="pageSize" :currentPage="currentPage" :total="totalNum" @change="changePage" />
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitBack">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="showAddCategory" title="添加分类" width="400" >
			<el-form :model="form" :rules="rules">
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="form.name" autocomplete="off" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="showAddCategory = false">取消</el-button>
					<el-button type="primary" @click="submit">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
	/**
	 * 图片库
	 * @property {Boolean} isMultiple 是否多选 默认false 
	 * @event {Function()} change 选择图片回调 
	 */
	import { getImagesApi , getCategoryApi , createCategoryApi , deleteCategoryApi } from '@/api/api';
	import { onMounted, reactive, ref } from 'vue'
	import config from '@/config/config'; // 引入配置文件
	import { ElMessage } from 'element-plus';
	const props = defineProps({
		isMultiple:{
			default:false,
			type: Boolean
		}
	})
	const baseURL = config.baseURL
	const dialogVisible = ref(true)
	const showAddCategory = ref(false)
	const totalNum = ref(0)
	const pageSize = ref(10)
	const currentPage = ref(1)
	const imageList = ref([])
	const categoryList = ref([])
	const categoryId = ref(0)
	const selectImage = ref([])
	const form = ref({
		name:''
	})
	const rules = {
		name: [
			{ required: true, message: '请输入分类名称', trigger: 'blur' },
		],
	}
	const upDate = reactive({
		categoryId:1
	})
	const emits = defineEmits(['change'])
	/**
	 * 返回
	 */
	const submitBack = () => {
		emits('change',selectImage.value)
	}
	/**
	 * 删除分类
	 */
	const deleteCategory = async (row:any) => {
		const { message } = await deleteCategoryApi({id:row.id})
		ElMessage.success(message)
		await getCategory()
		categoryId.value = 0
		upDate.categoryId = 0
		getImageList()
	}
	/**
	 * 选中分类
	 *
	 */
	const selectCategory = (row:any) => {
		categoryId.value = row.id
		upDate.categoryId = row.id
		getImageList()
	}
	/**
	 * 选择图片
	 */
	const selectImamge = (row:any) => {
		if(props.isMultiple){
			row.selected = !row.selected
			if(row.selected){
				selectImage.value.push(row)
			}else{
				const index = selectImage.value.findIndex((item:any) => item.id === row.id)
				if(index !== -1){
					selectImage.value.splice(index,1)
				}
			}
		}else{
			imageList.value.forEach((item:any) => {
				item.selected = false
			})
			row.selected = true
			selectImage.value = [row]
		}
	}
	/**
	 * 添加分类
	 */
	const submit = async () => {
		await createCategoryApi(form.value)
		showAddCategory.value = false
		getCategory()
	}
	/**
	 * 获取分类
	 */
	const getCategory = async () : Promise<void> => {
		const { data } = await getCategoryApi()
		categoryList.value = data
	}
	/**
	 * 图片上传成功回调
	 */
	const handSuccess = () => {
		currentPage.value = 1
		getImageList()
	}
	/**
	 * 获取图片列表
	 */
	const getImageList = async () => {
		const {data,total} = await getImagesApi({
			page:currentPage.value,
			pageSize:pageSize.value,
			categoryId:categoryId.value
		})
		totalNum.value = total
		imageList.value = data
	}
	/**
	 * 分页回调
	 */
	const changePage = (index:number) => {
		currentPage.value = index
		getImageList()
	}
	onMounted(()=>{
		getCategory()
		getImageList()
	})
</script>

<style scoped lang="scss">
	.uw-image-manager-left{
		width: 160px;
		li{
			cursor: pointer;
			&:hover{
				background: #409eff;
				color: #FFF;
			}
			&.active{
				background: #409eff;
				color: #FFF;
			}
		}
	}
	.uw-image-manager-box{
		flex: 1;
	}
	.uiwu-pagination{
		justify-content: flex-end;
	}
	.uw-image-item{
		box-sizing: border-box;
		cursor: pointer;
		&-image{
			position: relative;
			&-select{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: rgba(#000,0.5);
			}
		}
		
	}
</style>